<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>event-correlation-addlink</title>
    <%@ include file="../include/common.jsp"%>
    <%@ include file="../include/tree.jsp"%>
    <%@ include file="../include/form.jsp"%>
    <%@ include file="../include/jbox.jsp"%>
	<style type="text/css">
		.ztree {border: 1px solid #617775;background: #f0f6e4;width:220px;height:300px;overflow-y:scroll;overflow-x:auto;}
	</style>
	<script type="text/javascript">
	function closewin(){
		  getTopWin(window).closejBox("addlink-event-correlation");
	  }
	function resCheckboxClick(){
		var str=document.getElementById("resCheckbox");
		if(str.checked == false){
			$("#linkResId").val('');
			$("#resName").val('');
			$("#linkEventType").val('');
			$("#eventTypeName").val('');
		}
	}
	function showResTree(){
		var str=document.getElementById("resCheckbox");
		if(str.checked == true){
			$.ajax({ 
				  type:"post", 
				  url:"${pageContext.request.contextPath}/resource/res-frame!resViewTree.action", 
				  data:"", 
				  datatype:"json",
				  success:function(data) { 
						var zNodes=eval(data);
						$.fn.zTree.init($("#treeDemo"), setting, zNodes);
							var obj = $("#resName");
							var offset = $("#resName").offset();
							$("#menuContent").css({left:offset.left + "px", top:offset.top + obj.outerHeight() + "px"}).slideDown("fast");
							$("body").bind("mousedown", onBodyDown);
				  } 
		     	})
    	  }
	}
	var setting = {
			async: {
				enable: true,
				url:"${pageContext.request.contextPath}/resource/res-frame!resViewTree.action",
				dataType: "text",
				autoParam:["id"]
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: relNodeClick,
				onCheck: onCheck
			}
		};
		function relNodeClick(e, treeId, treeNode) {
			if(treeNode.id.substring(0,1) == 2){
				$("#linkResId").val(treeNode.id.split('|')[1]);
				$("#resName").val(treeNode.name);
				$("#linkEventType").val('');
				$("#eventTypeName").val('');
				hideMenu();
			}else{
				$("#linkResId").val('');
				$("#resName").val('请选择资源');	
				$("#linkEventType").val('');
				$("#eventTypeName").val('');
			}
			$("#resName").blur();
		}
		function onCheck(e, treeId, treeNode) {
			
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "resName" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		function showEventTypeTree(){
			$.ajax({ 
				  type:"post", 
				  url:"${pageContext.request.contextPath}/event/event-correlation!eventTypeViewTree.action?resId="+$("#linkResId").val(), 
				  data:"", 
				  datatype:"json",
				  success:function(data) { 
						var zNodes=eval(data);
						$.fn.zTree.init($("#treeDemo"), eventTypeSetting, zNodes);
							var obj = $("#eventTypeName");
							var offset = $("#eventTypeName").offset();
							$("#menuContent").css({left:offset.left + "px", top:offset.top + obj.outerHeight() + "px"}).slideDown("fast");
							$("body").bind("mousedown", onBodyDown);
				  } 
		     	})
	}
	var eventTypeSetting = {
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: eventTypeNodeClick,
				onCheck: onCheck
			}
		};
		function eventTypeNodeClick(e, treeId, treeNode) {
			if(treeNode.id.indexOf('event') >= 0){
				$("#linkEventType").val(treeNode.id.substring(5,treeNode.id.length));
				$("#eventTypeName").val(treeNode.name);
				hideMenu();
			}else{
				$("#linkEventType").val('');
				$("#eventTypeName").val('请选择具体事件类别');
			}
			$("#eventTypeName").blur();
		}
		function showRelationTypeTree(){
			$.ajax({ 
				  type:"post", 
				  url:"${pageContext.request.contextPath}/event/event-correlation!relationTypeViewTree.action?", 
				  data:"", 
				  datatype:"json",
				  success:function(data) { 
						var zNodes=eval(data);
						$.fn.zTree.init($("#treeDemo"), relationTypeSetting, zNodes);
							var obj = $("#relationTypeName");
							var offset = $("#relationTypeName").offset();
							$("#menuContent").css({left:offset.left + "px", top:offset.top -122 + "px"}).slideDown("fast");
							$("body").bind("mousedown", onBodyDown);
				  } 
		     	})
		}
		var relationTypeSetting = {
				view: {
					dblClickExpand: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: relationTypeNodeClick,
					onCheck: onCheck
				}
			};
			function relationTypeNodeClick(e, treeId, treeNode) {
				$("#relationType").val(treeNode.id);
				$("#relationTypeName").val(treeNode.name);
				$("#relationTypeName").blur();
				hideMenu();
			}
			$(function(){
				$.formValidator.initConfig({formid:"myform"
			          ,onerror:function(msg){ }
			          ,onsuccess:function(){
			        	  	add();
			          		return false;
			          }
			    });
				$("#eventTypeName").formValidator({onshow:"请选择具体事件类别",onfocus:"请选择具体事件类别",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"请选择具体事件类别"}).functionValidator({
				    fun:function(val,elem){
				        if(val=="请选择具体事件类别"){
						    return "请选择具体事件类别";
					    }else{
						    return true;
					    }
					}
				});
				$("#relationTypeName").formValidator({onshow:"不能为空",onfocus:"不能为空 ",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"不能为空"});
				$("#serialNumber").formValidator({onshow:"例：E1",onfocus:"例：E1",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"不能为空"})
				.functionValidator({
						    fun:function(val,elem){
						    	var sNum = '${sNum}';
						    	var array = sNum.split(',');
						    	for(var i = 0 ; i< array.length;i++){
						    		if(array[i] == val){
						    			return "已经存在"
						    		}
						    	}
						    	var reg = /^[0-9a-zA-Z]*$/;
						    	if(val.match(reg) == null){
						    		return "数字或字母"
						        }
						        return true;
							}
				  });
			})
			function add(){
				 var pWin = getTopWin(window).currentWin["addlink-event-correlation"];
				 pWin.addRow($("#serialNumber").val(),$("#resName").val(),$("#eventTypeName").val(),$("#relationTypeName").val(),$("#linkResId").val(),$("#linkEventType").val(),$("#relationType").val());
				 getTopWin(window).closejBox("addlink-event-correlation");
			}
	</script>
  </head>
  
  <body class="padding-8">
  	<div id="menuContent" style="display:none; position: absolute;z-index:100;">
		<ul id="treeDemo" class="ztree" style="margin-top:0; width:190px; height: 110px;"></ul>
	</div>
    <form action="" id="myform" name="myform" method="post">
    		<table class="table_eidt">
    			<tr style="height: 50px">
    				<th class="td_left" style="width: 120px">
    					<span class="span_alert">*</span><label>序号</label>
    				</th>
    				<td class="td_right">
    					<input id="serialNumber" type="text" name="serialNumber" class="input_text"/>
    					<span id="serialNumberTip" style="width:150px"></span>
    				</td>
    			</tr>
    			<tr style="height: 50px">
    				<th class="td_left">
    					<input type="checkbox" id="resCheckbox" onclick="resCheckboxClick();"><label>指定从事件资源</label>
    				</th>
    				<td class="td_right">
    					<input id="resName" type="text" name="resName" readonly value="" onclick="showResTree();" class="input_text tree_res"/>
    					<input id="linkResId" name="linkResId" type="hidden">
    				</td>
    			</tr>
    			<tr style="height: 50px">
    				<th class="td_left">
    					<span class="span_alert">*</span><label>从事件类别</label>
    				</th>
    				<td class="td_right">
	    				<input id="eventTypeName" type="text" name="eventTypeName" readonly value="" onclick="showEventTypeTree();" class="input_text tree_res"/>
	    				<input id="linkEventType" name="linkEventType" type="hidden">
    					<span id="eventTypeNameTip" style="width:150px"></span>
    				</td>
    			</tr>
    			<tr style="height: 50px">
    				<th class="td_left">
    					<span class="span_alert">*</span><label>与主事件关系</label>
    				</th>
    				<td class="td_right">
	    				<input id="relationTypeName" type="text" name="relationTypeName" readonly value="" onclick="showRelationTypeTree();" class="input_text tree_res"/>
	    				<input id="relationType" name="relationType" type="hidden">
    					<span id="relationTypeNameTip" style="width:150px"></span>
    				</td>
    			</tr>
    		</table>
    		<div align="center" style="margin-top:5px;">
		    	<button type="submit" id="button" name="button" class="btn-4">保存</button>
		    	<button type="reset" class="btn-4">重置</button>
		    	<button type="button" onclick="closewin();" class="btn-4">取消</button>
    		</div>
    	</form>
  </body>
</html>
